<template>
  <view class="forgotPassword">
    <view class="nesting">
      <image src="/static/login/nesting.png" mode="" />
    </view>
    <tabTopBar
      :title="t('forgotPassword.forgotPassword')"
      :bgColor="'transparent'"
    />

    <view class="forgotPassword-info">
      <view class="steps">
        <view class="steps-num">2</view>
        <view class="steps-text">
          {{ t("forgotPassword.pleaseEnterThe_6DigitVerificationCode") }}
        </view>
      </view>
      <view class="introduce">
        <!-- 请前往您的邮箱 (yangjian@qq.com)
        查看重置密码的相关邮件，输入邮件中的6位数字验证码。
        在此过程中，请不要关闭此页面。 -->
        {{ t("forgotPassword.pleaseGoToYourMailbox") }}
        ({{ email }})
        {{ t("forgotPassword.prompt") }}
      </view>

      <view>
        <xsk-code-input
          :value.sync="code"
          :width="96"
          :height="120"
          backgroundColor="#222D49"
          bold
          showVal
          :length="6"
          @confirm="inputConfirm"
        >
        </xsk-code-input>
      </view>

      <view class="code-btn">
        <view class="btn" @click="getCode" v-if="!isCountdown">
          {{ $t(codeText) }}
        </view>
        <view class="time" v-else>{{ codeNum }} S</view>
      </view>
      <up-button
        type="primary"
        class="btn-submit"
        :text="t('forgotPassword.nextBtn')"
        :disabled="!isDisBable"
        @click="handleNext"
      ></up-button>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import apis from "@/apis/index.js";

const code = ref("");
const codeText = ref("forgotPassword.getAVerificationCode");
const isCountdown = ref(false);
const timer = ref(null);
const codeNum = ref(60);

import { useI18n } from "vue-i18n";
const { t } = useI18n();
const email = ref("");
onLoad((options) => {
  email.value = options.email;

  isCountdown.value = true;
  timer.value = setInterval(function () {
    codeNum.value--;
    // 当倒计时为0时，启用按钮并清除计时器
    if (codeNum.value === 0) {
      clearInterval(timer.value);
      isCountdown.value = false;
      codeNum.value = 60;
    }
  }, 1000);
});

const isDisBable = computed(() => code.value.length > 5);

const inputConfirm = (value) => {
  code.value = value;
};

const handleNext = () => {
  apis.verifyTheEmailVerificationCode({ code: code.value }).then((res) => {
    console.log("res", res);
    if (res.code == 200) {
      uni.navigateTo({
        url: `/pages/forgotPassword/resetPaass?email=${email.value}`,
      });
    }
  });
};

const getCode = () => {
  if (!isCountdown.value) {
    apis.getPasswordEmailCode({ email: email.value }).then((res) => {
      isCountdown.value = true;
      if (res.code == 200) {
        timer.value = setInterval(function () {
          codeNum.value--;
          // 当倒计时为0时，启用按钮并清除计时器
          if (codeNum.value === 0) {
            clearInterval(timer.value);
            isCountdown.value = false;
            codeNum.value = 60;
          }
        }, 1000);
      }
    });
  } else {
    return false;
  }
};
</script>

<style lang="scss" scoped></style>

<style scoped lang="scss">
.forgotPassword {
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #172c40, #08121e);
  padding: 0 30upx 50upx 30upx;
  box-sizing: border-box;
  .nesting {
    width: 960upx;
    height: 1320upx;
    position: absolute;
    top: -100upx;
    left: 145upx;
    /* 让点击事件穿透该元素 */
    pointer-events: none;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .forgotPassword-info {
    width: 100%;
    padding: 160upx 30upx 0 30upx;
    box-sizing: border-box;
    text-align: center;
    z-index: 99999999999;
    .steps {
      width: 100%;
      text-align: left;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 30rpx;
      .steps-num {
        width: 48rpx;
        height: 48rpx;
        background-color: #64b7f6;
        text-align: center;
        line-height: 48rpx;
        border-radius: 50%;
        margin-right: 18rpx;
      }
      .steps-text {
        font-family: Alibaba PuHuiTi 3;
        font-size: 32rpx;
        font-weight: 500;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        /* 白 */
        color: #ffffff;
      }
    }
    .introduce {
      width: 100%;
      text-align: left;
      font-family: Alibaba PuHuiTi 3;
      font-size: 24rpx;
      line-height: 45rpx;
      font-variation-settings: "opsz" auto;
      font-feature-settings: "kern" on;
      /* 请前往您的邮箱  */
      color: rgba(255, 255, 255, 0.6);
      margin-bottom: 30rpx;
    }

    .btn-submit {
      width: 100%;
      height: 88upx;
      border-radius: 150upx;
      border: none;
      font-family: Alibaba PuHuiTi 3;
      font-size: 32upx;
      font-weight: 500;
      text-align: center;
      font-variation-settings: "opsz" auto;
      margin-top: 40rpx;
    }
    .code-btn {
      width: 100%;
      text-align: center;
      margin: 40rpx 0;
      z-index: 999;
      .btn {
        font-family: Alibaba PuHuiTi 3;
        font-size: 32rpx;
        font-weight: 500;
        font-variation-settings: "opsz" auto;
        color: #ffffff;
        margin-bottom: 20rpx;
        // background: none;
        // border: none;
      }
      .time {
        font-family: Alibaba PuHuiTi 3;
        font-size: 24rpx;
        font-variation-settings: "opsz" auto;
        color: #c2c4c7;
      }
    }
  }
  :deep(.u-form-item__body__right__message) {
    text-align: left;
  }
}
</style>
